<template>
  <c-view>
    <template v-slot:header>
      <div class="title">
        <!-- $route.meta.title -->
        <el-button type="primary" :size="size" icon="el-icon-plus" @click="showDialog">新增</el-button>
      </div>
    </template>
    <div class="main__box">
      <c-table ref="cTable" selection hasBorder :max-height="maxHeight" :size="size" :loading="isLoading"
        :table-header="tableHeader" :table-list="tableList" :table-inner-btns="tableInnerBtns" :page-info="pageInfo"
        @change-pagination="changePagination">
        <template v-slot:header>
          <c-search :form-model="searchObj" :form-items="searchItems" @submit-form="searchSubmit"
            @reset-form="searchReset"></c-search>
        </template>
      </c-table>
    </div>
    <div v-if="dialogObj.isShow">
      <c-dialog class="dialog-box" :is-show="dialogObj.isShow" :title="dialogObj.title" close-btn
        @before-close="dialogObj.isShow = false" @on-submit="dialogConfirm">
        <{{dashCase name}}-add ref="childRef" :init-data.sync="dialogObj.initData" :is-edit="dialogObj.isEdit">
        </{{dashCase name}}-add>
      </c-dialog>
    </div>
  </c-view>
</template>

<script>
  import mixinTable from 'mixins/table'
  import CDialog from 'components/dialog'
  //import dictObj from '@/store/dictData'
  import {{ properCase name }}Add from './add'

  export default {
    name: '{{camelCase name}}',
    mixins: [mixinTable],
    components: {
      CDialog,
      {{ properCase name }}Add
  },
  data(vm) {
    return {
      // 对话框对象
      dialogObj: {},
      // 表格内操作按钮
      tableInnerBtns: [
        {
          name: '编辑',
          icon: 'el-icon-edit',
          handle(row) {
            const { id } = row
            // TODO...
            vm.showDialog({
              title: '编辑',
              isEdit: true,
              initData: {
                id
                // TODO...
              }
            })
          }
        },
        {
          name: '删除',
          icon: 'el-icon-delete',
          handle(row) {
            const { name, id } = row
            vm.confirmTip(`是否删除【${name}】`, () => {
              vm.deleteHandle({ id })
            })
          }
        }
      ],
      tableHeader: [
        // TODO...
        {
          label: '创建人',
          prop: 'opCreator'
        },
        {
          label: '创建时间',
          prop: 'created',
          width: 100,
          search: {
            type: 'dateTime',
            prop: 'dateTime'
          }
        },
        {
          label: '更新人',
          prop: 'opEditor'
        },
        {
          label: '更新时间',
          prop: 'updated'
        }
      ]
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    /*
     * 查询表格列表数据
     */
    fetchData() {
      const { pageNo, pageSize } = this.pageInfo
      const { dateTime, ...other } = this.searchObj
      const searchDate = this.getSearchDate(dateTime)
      this.isLoading = true
      this.$api.{{ camelCase apiFile }}.query{{ properCase name }}List({
        ...searchDate,
        ...other,
        rows: pageNo,
        offset: pageSize
      }).then(res => {
        this.isLoading = false
        if (res && res.totalCount) {
          const { data, totalCount } = res
          this.pageInfo.totalNum = totalCount
          this.tableList = data || []
        } else {
          this.tableList = res || []
        }
      })
    },
    /**
     * dialog对话框数据处理
     * @opts {*}
     */
    showDialog(opts) {
      this.dialogObj = {
        isShow: true,
        isEdit: opts.isEdit || false,
        title: opts.title || '新增',
        initData: opts.initData
      }
    },
    /**
     * dialog新增、编辑处理函数
     */
    dialogConfirm() {
      const childRef = this.$refs.childRef
      childRef.$refs.formRef.validate(valid => {
        if (valid) {
          const params = childRef.formModel
          const curAction = this.dialogObj.isEdit ? 'edit{{properCase name}}' : 'add{{properCase name}}'
          // TODO...
          this.$api.{ { camelCase apiFile } } [curAction]({
            // TODO...
            ...params
          }).then(() => {
            this.responeHandle(this.dialogObj.isEdit ? '更新成功' : '新增成功')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    /**
     * 删除单条表格数据
     * @id {Number}
     */
    deleteHandle(params) {
      this.$api.{{ camelCase apiFile }}.delete{{ properCase name }}(params).then(() => {
      this.$msgTip('删除成功')
      this.delResetData()
    })
  }
  }
}
</script>
